<template>
  <el-container>
    <el-breadcrumb separator>
      <!-- <el-breadcrumb-item>操作日志</el-breadcrumb-item> -->
      <el-form label-width="120px" class="form-fliter" @submit.native.prevent>
        <!--高级检索-->
        <div class="searchDiv height-search do-style-btn">
          <div class="dataSearch" style="width:75px">
            <span>操作时间：</span>
          </div>
          <div class="dataSearch" style="margin-right:183px">
            
            <el-date-picker
              v-model="ruleForm.datetimerange"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              time-arrow-control
              :editable="false"
              :picker-options="pickerOptions0"
            ></el-date-picker>
          </div>

          <div class="dataSearch" style="margin-right:12px" >
            <el-input
              type="text"
              style="width:260px;margin-left:-15px"
              v-model="searchName"
              placeholder="请输入姓名、所属系统或终端标识"
              @keyup.enter.native="search"
              clearable
            >
              <i
                @click="search"
                style="color:#0090ff;font-size:14px"
                class="iconfont icon-sousuo"
                slot="suffix"
              ></i>
            </el-input>
          </div>

          <!-- <span class="high-search" v-on:click.stop="doCollapse">高级搜索
            <i :class="collapse ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i>
          </span>-->
          <el-button style="width:88px;" @click="clearData" class="def-btn-sty">重置</el-button>
          <!-- <div class="checkDiv" v-if="collapse" id="myPanel">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
              <el-form-item label="操作时间：">
                <el-date-picker
                  style="width:100%"
                  v-model="ruleForm.datetimerange"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :editable="false"
                  time-arrow-control
                  :picker-options="pickerOptions0"
                ></el-date-picker>
              </el-form-item>
            </el-form>
            <div class="mr-btn mt-20">
              <el-button type="primary" @click="search('close')"
                >确定</el-button
              >
            </div>
          </div>-->
        </div>
      </el-form>
    </el-breadcrumb>

    <!-- <el-breadcrumb class="input-num-reserach" v-if="searchName || (ruleForm.datetimerange != null && ruleForm.datetimerange.length != 0)">
      <div style="text-align: right;">
        <span v-if="searchName">{{ searchName}}<span class="x-handel" @click="deleteSelectHandel('1')">x</span></span>
        <span v-if="ruleForm.datetimerange != null && ruleForm.datetimerange.length != 0">
          {{ ruleForm.datetimerange[0] }}-{{ ruleForm.datetimerange[1]
          }}<span class="x-handel" @click="deleteSelectHandel('2')">x</span>
        </span>
      </div>
    </el-breadcrumb>-->
    <el-main style="margin-top:-20px" v-loading="loading">
      <el-button
        style="margin-top:-20px"
        @click="importFile"
        class="golable-sty-btn"
        type="primary"
      >导出</el-button>

      <el-table
        style="margin-top:45px;background-color:#fff"
        :data="logList"
        class="mt-20"
        stripe
        height="calc(100vh - 200px)"
      >
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column prop="userName" label="用户标识" show-overflow-tooltip></el-table-column>
        <el-table-column prop="departmentName" label="单位名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cnName" label="姓名" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="appName" label="所属系统" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deviceId" label="终端标识" show-overflow-tooltip></el-table-column>
        <el-table-column prop="detail" label="操作行为" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="operationTime" label="操作时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="操作结果" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">成功</span>
            <span v-else>失败</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <div class="clearfix enc-pagination" style="padding:10px">
        <el-pagination
          class="mr-btn"
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, jumper,sizes,total"
          :total="total"
        ></el-pagination>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import { getOperationsLog, importLog } from "@/api/logApi.js";
export default {
  components: {},
  data() {
    return {
      searchName: "",
      collapse: false,
      loading: false,
      showDatePicker: false,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      logList: [],
      ruleForm: {
        datetimerange: [],
        serviceType: ""
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  created() {
    this.getOperationsLog();
    document.addEventListener("click", e => {
      var sp = document.getElementById("myPanel");
      if (sp) {
        if (!sp.contains(event.target)) {
          this.collapse = !this.collapse;
        }
      }
    });
  },
  watch: {
    "ruleForm.datetimerange": {
      deep: true,
      handler: function() {
        this.currentPage = 1;
        this.getOperationsLog();
      }
    },
    $route(to, from) {
      if (to.name == "operationsLog") {
        this.getOperationsLog();
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOperationsLog();
    },
    deleteSelectHandel(type, val) {
      if (type == "1") {
        this.searchName = "";
      }
      if (type == "2") {
        this.ruleForm.datetimerange = null;
      }
      this.getOperationsLog();
    },
    //查询所有用户
    getOperationsLog() {
      this.loading = true;
      let params = {
        userName: this.searchName,
        serviceType: this.ruleForm.serviceType,
        startTime:
          this.ruleForm.datetimerange == null
            ? ""
            : this.ruleForm.datetimerange[0],
        endTime:
          this.ruleForm.datetimerange == null
            ? ""
            : this.ruleForm.datetimerange[1],
        offset: this.currentPage,
        limit: this.pageSize,
        flag: false
      };
      getOperationsLog(params)
        .then(res => {
          this.loading = false;
          if (res.data.success) {
            this.total = res.data.data.total;
            this.logList = res.data.data.list;
          }
        })
        .catch(res => {
          this.loading = false;
        });
    },
    //打开高级检索
    doCollapse() {
      this.collapse = !this.collapse;
      console.log("this.collapse===", this.collapse);
    },
    //高级检索查询
    search(type) {
      this.currentPage = 1;
      if (type === "close") {
        this.collapse = !this.collapse;
      }
      this.currentPage = 1;
      this.getOperationsLog();
    },
    // 重置
    clearData() {
      this.searchName = "";
      this.ruleForm.typeList = [];
      this.ruleForm.datetimerange = [];
      this.currentPage = 1;
      this.getOperationsLog();
    },
    importFile() {
      debugger;
      let params = {
        userName: this.searchName,
        serviceType: this.ruleForm.serviceType,
        startTime:
          this.ruleForm.datetimerange == null
            ? ""
            : this.ruleForm.datetimerange[0],
        endTime:
          this.ruleForm.datetimerange == null
            ? ""
            : this.ruleForm.datetimerange[1],
        offset: this.currentPage,
        limit: this.pageSize,
        flag: true
      };
      importLog("2", params);
    },
    //分页选择
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getOperationsLog();
    },
    datepickerToggle(key) {
      this.showDatePicker = key === "enter";
    },
    mouseleave(key) {
      this.collapse = key === "enter";
      if (key === "enter" && this.showDatePicker) {
        this.showDatePicker = false;
      }
      console.log(key, this.showDatePicker, this.collapse);
    },
    msg(err, type) {
      this.$alert(err, "提示", {
        confirmButtonText: "确定",
        type: type,
        callback: action => {}
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.height-search{
  position:absolute;
  right:20px;
  top:97px;
}
.enc-pagination {
  float: right;
}
/deep/ {
  .el-table .cell .el-button {
    font-size: 14px;
    line-height: 18px;
    color: #409eff;
  }
  .el-table .cell .el-button :hover {
    color: #409eff;
  }
  .el-table::before {
    height: 0;
  }
  .el-footer {
    padding-right: 40px;
    margin: 0 0 0 40px;
    // background-color: #ffffff;
  }
}
.do-style-btn{
  position: absolute;
  top:80px
}
</style>
